<template>
  <view class="user_info">
    <view class="card">
      <view class="item flex-jsb-aic border-t-1">
        <button
          class="avatar-wrapper user_avatar"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <text class="label">头像</text>
          <view class="flex-jsb-aic1">
            <image class="avatar" :src="BaseUrl + info.avatar"></image>
            <u-icon name="arrow-right" color="#BBBBBB" size="18"></u-icon>
          </view>
        </button>
      </view>
      <!-- <view class="user_avatar">
        <text>头像</text>
        <view class="avatar_box" @click="upLoadAvatar">
          <image :src="BaseUrl + info.avatar" mode="scaleToFill" />
          <u-icon style="margin-left: 10rpx" name="arrow-right"></u-icon>
        </view>
      </view> -->
      <view class="user_name">
        <text style="width: 160rpx">昵称</text>
        <view class="input_box">
          <input
            type="nickname"
            :value="info.nickname"
            class="weui-input"
            placeholder="请输入昵称"
            @blur="bindblur"
          />
          <!-- <u-input
            type="text"
            input-align="right"
            v-model="info.nickname"
            @input="upLoadName"
            placeholder="请输入用户名"
          /> -->
          <!-- <u-icon style="margin-left: 10rpx" name="arrow-right"></u-icon> -->
        </view>
      </view>
    </view>
    <button class="saveInfo" @click="saveInfo">保存</button>
  </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
export default {
  data() {
    return {
      BaseUrl: BaseUrl,
      info: {},
    };
  },

  onLoad() {
    this.info = uni.getStorageSync("userInfo");
  },

  methods: {
    //选择头像
    async onChooseAvatar(e) {
      //   console.log(e, "SPDUIpobdfzj;l");
      //   const { avatarUrl } = e.detail;
      this.info.avatar = e.detail.avatarUrl;
      //   this.info.avatar = avatarUrl;
      console.log(e.detail, "SPDUIpobdfzj;l");
      uni.uploadFile({
        url: BaseUrl + "/api/common/upload",
        filePath: e.detail.avatarUrl,
        name: "file",
        header: {
          token: uni.getStorageSync("token"),
          "content-type": "multipart/form-data",
        },
        formData: {
          user: "test",
        },
        success: (uploadFileRes) => {
          console.log(uploadFileRes, "dfhaium");
          const infoData = JSON.parse(uploadFileRes.data);
          this.info.avatar = infoData.data.url;
        },
      });
    },
    //获取微信昵称
    bindblur(e) {
      this.info.nickname = e.detail.value;
    },
    // upLoadAvatar() {
    //   uni.chooseImage({
    //     count: 1,
    //     success: async (res) => {
    //       const tempFilePaths = res.tempFilePaths;
    //       await uni.uploadFile({
    //         url: BaseUrl + "/api/common/upload",
    //         filePath: tempFilePaths[0],
    //         name: "file",
    //         header: {
    //           token: uni.getStorageSync("token"),
    //           "content-type": "multipart/form-data",
    //         },
    //         success: (res1) => {
    //           this.info.avatar = JSON.parse(res1.data).data.url;
    //         },
    //       });
    //     },
    //   });
    // },
    // upLoadName() {
    //   this.info.nickname = this.info.nickname;
    // },
    saveInfo() {
      this.$request
        .post("api/wanlshop.user/profile", {
          avatar: this.info.avatar,
          nickname: this.info.nickname,
          username: this.info.nickname,
        })
        .then((res) => {
          console.log(res.data);
          if (res.code == 1) {
            uni.showToast({
              title: "保存成功",
              icon: "none",
            });
            uni.setStorageSync("userInfo", res.data);
            uni.reLaunch({ url: "/pages/tabBar/home/home" });
          }
        });
      // uni.request({
      //   url: BaseUrl + "/api/wanlshop.user/profile",
      //   method: "POST",
      //   header: {
      //     token: uni.getStorageSync("token"),
      //   },
      //   data: {
      //     avatar: this.info.avatar,
      //     nickname: this.info.nickname,
      //     username: this.info.nickname,
      //   },
      //   success: (res) => {},
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.user_info {
  padding: 30rpx;
  .card {
    padding: 30rpx;
    border-radius: 16rpx;
    background: #fff;
    .user_avatar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;
      image {
        width: 80rpx;
        height: 80rpx;
      }
      .avatar_box {
        display: flex;
        align-items: center;
      }
    }
    .user_name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;
      .input_box {
        display: flex;
        align-items: center;
      }
    }
  }
  .saveInfo {
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, #00a67a, #057748);
    position: absolute;
    top: 30vh;
    border-radius: 40rpx;
    width: calc(100% - 60rpx);
  }
}
.flex-jsb-aic {
  width: 100%;
  border: none;
  box-sizing: border-box;
  height: 111rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-jsb-aic1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.item {
  height: 111rpx;
  line-height: 111rpx;

  .label {
    font-family: PingFang SC;
    font-weight: 500;
    // font-size: 32rpx;
    text-align: left;
    width: 80px;
    color: #333333;
  }
}
.item1 {
  padding: 0 20rpx;
  .label {
    width: 100rpx;
    padding-left: 58rpx;
  }
}
.weui-input {
  text-align: right;
}
.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}
.btn {
  position: absolute;
  left: 0;
  bottom: 50rpx;
  right: 0;
  padding-left: 80rpx;
  padding-right: 80rpx;
}
.avatar-wrapper {
  width: 100%;
}
</style>
